<template>
  <div class="manage-product">
    <el-scrollbar height="600px">
      <div class="title">管理产品</div>
      <el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal" @select="selectItem">
        <el-menu-item index="1">已发布产品</el-menu-item>
        <el-menu-item index="2">正在编辑产品</el-menu-item>
      </el-menu>
      <div class="goods-list" v-if="currentSelect == 1">
        <GoodsItem v-if="goodsList.length > 0" v-for="item in goodsList" :obj="item"></GoodsItem>
      </div>
      <div class="goods-list" v-else>
        <GoodsItem v-if="goodsList.length > 0" v-for="item in goodsList" :obj="item"></GoodsItem>
      </div>
      <el-empty :image-size="200" v-if="goodsList.length === 0" description="你还没有可管理的商品">
        <el-button type="primary" @click="$router.replace('/shop/managegoods/addnewgoods')"
          >添加商店</el-button
        >
      </el-empty>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import GoodsItem from './components/GoodsItem.vue'
import { getGoods } from '@/api/shop'

// 当前选中
const currentSelect = ref(1)

// 分页
const pageInfo = ref({
  page: 1,
  total: 0,
  totalPage: 0,
})

watch(
  () => pageInfo.value.page,
  (i) => {
    getAllGoods()
  },
)

// 商品列表
const goodsList = ref([])

// 获取所有商品
const getAllGoods = async () => {
  const res = (await getGoods(pageInfo.value.page, +currentSelect.value - 1)).data
  goodsList.value = res.data.data
  pageInfo.value = {
    page: res.data.currentPage,
    total: res.data.total,
    totalPage: res.data.pages,
  }
}

getAllGoods()

// 变更选项时触发
const selectItem = (i) => {
  currentSelect.value = +i
  getAllGoods()
}
</script>

<style scoped less="scss">
.manage-product {
  position: relative;
  height: 600px;

  .title {
    font-size: 20px;
    margin: 10px 20px;
  }

  .goods-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 创建四列，每列占据容器宽度的1/4 */
    grid-gap: 10px;
  }

  .pagination {
    display: flex;
    justify-content: center;

    margin: 50px 0 50px 0;
  }
}
</style>
